<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="店铺地址"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 地址信息 -->
      <view class="address-section" @click="openMap">
        <view class="section-title">店铺地址</view>
        <view class="address-display">
          <text>{{ address }}</text>
          <view class="location-icon">
            <uni-icons
              type="location-filled"
              size="24"
              color="#4cd964"
            ></uni-icons>
          </view>
        </view>
      </view>

      <!-- 保存按钮 -->
      <view class="submit-btn" @click="handleSubmit">
        <text>保存</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 地址信息
const address = ref("");
const longitude = ref("");
const latitude = ref("");

// 页面加载时接收参数
onLoad((options) => {
  console.log("接收到的参数：", options);
  if (options.address) {
    address.value = decodeURIComponent(options.address);
  }
  if (options.longitude) {
    longitude.value = options.longitude;
  }
  if (options.latitude) {
    latitude.value = options.latitude;
  }
});

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 打开地图选择
const openMap = () => {
  // #ifdef H5
  // H5 平台需要配置高德地图 Key
  // 在 chooseLocation 之前设置高德地图配置
  if (typeof window !== "undefined" && !window._AMapSecurityConfig) {
    window._AMapSecurityConfig = {
      securityJsCode: "a1a12e1bfba59fd4088af47852364210", // 高德地图安全密钥
    };
  }
  // #endif

  const params = {
    // #ifdef H5
    // H5 平台使用高德地图 Key
    keyword: "", // 搜索关键词
    // #endif
  };

  // 如果已有经纬度，传入作为初始位置
  if (latitude.value && longitude.value) {
    params.latitude = parseFloat(latitude.value);
    params.longitude = parseFloat(longitude.value);
  }

  uni.chooseLocation({
    ...params,
    success: (res) => {
      console.log("选择的位置:", res);
      // res 包含以下字段：
      // - name: 位置名称
      // - address: 详细地址
      // - latitude: 纬度
      // - longitude: 经度

      // 拼接完整地址
      let fullAddress = res.address || "";
      if (res.name && res.name !== res.address) {
        fullAddress = fullAddress + (fullAddress ? "" : "") + res.name;
      }

      address.value = fullAddress;
      latitude.value = res.latitude.toString();
      longitude.value = res.longitude.toString();

      console.log("更新后的地址信息：", {
        address: address.value,
        latitude: latitude.value,
        longitude: longitude.value,
      });
    },
    fail: (err) => {
      console.error("选择位置失败：", err);

      // 根据错误类型给出不同提示
      let errorMsg = "选择位置失败";
      if (err.errMsg) {
        if (err.errMsg.includes("cancel")) {
          errorMsg = "已取消选择";
        } else if (err.errMsg.includes("auth")) {
          errorMsg = "请授权位置权限";
        }
      }

      uni.showToast({
        title: errorMsg,
        icon: "none",
      });
    },
  });
};

// 提交
const handleSubmit = () => {
  if (!address.value) {
    uni.showToast({
      title: "请选择地址",
      icon: "none",
    });
    return;
  }

  if (!latitude.value || !longitude.value) {
    uni.showToast({
      title: "请选择地图位置",
      icon: "none",
    });
    return;
  }

  // 通过 eventChannel 返回数据给上一个页面
  const eventChannel = uni.$emit("selectAddress", {
    address: address.value,
    latitude: latitude.value,
    longitude: longitude.value,
  });

  uni.showToast({
    title: "保存成功",
    icon: "none",
  });

  setTimeout(() => {
    goBack();
  }, 1000);
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 20rpx 32rpx;
  padding-top: 20rpx;
  padding-bottom: 120rpx;
  display: flex;
  flex-direction: column;
}

// 地址区域
.address-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 24rpx;
}

.address-display {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;

  text {
    flex: 1;
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}

.location-icon {
  flex-shrink: 0;
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  &:active {
    opacity: 0.7;
  }
}

// 地图容器
.map-container {
  flex: 1;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  min-height: 600rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
}

.map-tip {
  font-size: 28rpx;
  color: #999;
}

// 保存按钮
.submit-btn {
  position: fixed;
  bottom: 32rpx;
  left: 32rpx;
  right: 32rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #faa820;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 12rpx;

  &:active {
    opacity: 0.8;
  }
}
</style>
